<template>
  <div>
    <!-- 查询条件输入 -->
    <el-row :gutter="20">
        <el-col :span="8">
          <el-form>
          <el-form-item label="负责人">
            <el-select
                v-model="sysUser.userId"
                placeholder="请选择负责人"
                @visible-change="fetchUsers"
            >
              <el-option
                  v-for="user in users"
                  :key="user.id"
                  :label="user.name"
                  :value="user.id"
              ></el-option>
            </el-select>
          </el-form-item>
          </el-form>
        </el-col>

      <el-col :span="8">
        <el-form>
        <el-form-item label="客户">
          <el-select
              v-model="Cid.customerName"
              placeholder="请选择客户"
              @visible-change="fetchCustomer"
          >
            <el-option
                v-for="customer in customers"
                :key="customer.id"
                :label="customer.name"
                :value="customer.name"
            ></el-option>
          </el-select>
        </el-form-item>
        </el-form>
      </el-col>

      <el-col :span="8">
        <el-select v-model="searchStatus" placeholder="请选择">
          <el-option
              v-for="item in searchOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="8">
        <el-form>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
        </el-form>
      </el-col>


    </el-row>






    <!-- 展示查询数据 -->
    <el-table :data="priceListVoLists" style="width: 100%">
      <el-table-column prop="plId" label="报价单编号" width="180"></el-table-column>
      <el-table-column prop="customerName" label="客户名称" width="180"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      <el-table-column prop="validityPeriod" label="失效时间" width="180"></el-table-column>
      <el-table-column prop="userName" label="负责人" width="180"></el-table-column>
      <el-table-column prop="statusStr" label="状态" width="180"></el-table-column>
      <el-table-column label="操作" width="180">
        <template v-slot="scope">
          <el-button type="text" @click="handleDetail(scope.row)">查看详情</el-button>
          <!-- 添加下拉框 -->
          <el-select v-model="scope.row.newStatus" placeholder="请选择" @change="handleSelectChange(scope.row)">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看详情的对话框 -->
    <el-dialog title="商品详情" v-model="dialogVisible">
      <el-table :data="detailList">
        <el-table-column prop="brand" label="商品品牌"></el-table-column>
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <el-table-column prop="typeName" label="包装类型"></el-table-column>
        <el-table-column prop="weight" label="体积/重量"></el-table-column>
        <el-table-column prop="unitPrice" label="售价"></el-table-column>
        <el-table-column prop="productNum" label="最大销售量"></el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-size="page.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
    >
    </el-pagination>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {getCustomer} from "../../../api/sale/customer";
import {toExamine,selectDetailed,selectPriceList,getUser} from "../../../api/sale/priceList";

const searchStatus=ref('')

    const detailList = ref([]) // 报价单商品详情数据
    const dialogVisible = ref(false) // 控制详情对话框的显示
    const priceListVoLists=ref([])
    // 查询报价单
    function handleSearch(){
      const params = {
        // ...inventoryVo.value, // 展开 inventoryVo.value 对象的所有属性
        userId:sysUser.value.userId,
        customerName:Cid.value.customerName,
        searchStatus:searchStatus.value,
        currentPage: page.value.currentPage, // 当前页码
        pageSize: page.value.pageSize // 每页条数
      };

    selectPriceList(params).then(res=>{
      console.log(res)
        page.value.total=res.total
        priceListVoLists.value=res.rows;
        priceListVoLists.value.forEach(item=>{
          item.createTime=formatDate(new Date(item.createTime));
          item.validityPeriod=formatDate(new Date(item.validityPeriod));
          // detailList.value.push(item.priceListItemList);
        })
    })
      console.log(detailList.value)
    }
    const formatDate = (date) => {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
      const day = String(date.getDate()).padStart(2, '0');

      return `${year}-${month}-${day}`;
    };

    // 查看详情
    const handleDetail = (row) => {
      selectDetailed(row.plId).then(res=>{
        detailList.value = [];
          res.priceListItems.forEach(item=>{
            detailList.value.push(item)
          })
      })
      dialogVisible.value = true
    }
    const Cid=ref({
      customerName:''
    })
    const customers = ref([]);
    const fetchCustomer =async (visible) =>{
      if(visible){
        getCustomer().then(res=>{
          customers.value = res.customerList.map(user => ({
            id: user.customerId,
            name: user.customerName
          }));
        })
      }
    };

    const sysUser=ref({
      userId:''
    })
    const users = ref([]);
    const fetchUsers =async (visible) =>{
      if(visible){
        getUser().then(res=>{
          users.value = res.sysUserList.map(user => ({
            id: user.userId,
            name: user.userName
          }));
        })
      }
    };
    //审核下拉框
    const options = ref([
      { value: 1, label: '通过' },
      { value: 2, label: '驳回' },

    ]);
const searchOptions = ref([
  {value:'',label: '请选择状态'},
  {value: 0,label:'未审核'},
  { value: 1, label: '审核通过' },
  { value: 2, label: '被驳回' },

]);

    // 处理下拉框值变化的事件
    const handleSelectChange = (row) => {

      console.log(row.plId,row.newStatus)
      toExamine(row.plId,row.newStatus).then(res=>{
        handleSearch();
        alert(res.msg)
         console.log(res);
      })

}

 const page = ref({
  total: 22,
  currentPage: 1,
  pageSize: 10,
})
function handleSizeChange(newSize) {
  page.value.pageSize = newSize;
  // fetchInventory();
  handleSearch();
}
function handleCurrentChange(newPage) {
  page.value.currentPage = newPage;
  // fetchInventory();
  handleSearch();
}
</script>

<style scoped>
/* 可以在这里添加一些样式 */
</style>
